<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>LeoVue</title>
    <meta name="description" content="一个简洁的Vue.js组件库">
    <link rel="icon" href="/leovue/icons/57x57.png">
  <link rel="manifest" href="/leovue/manifest.json">
  <meta name="theme-color" content="#F00BA4">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon" href="/leovue/icons/152x152.png">
  <link rel="mask-icon" href="/leovue/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/leovue/icons/144x144.png">
  <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/leovue/assets/css/0.styles.2bae9745.css" as="style"><link rel="preload" href="/leovue/assets/js/app.bbd8fb51.js" as="script"><link rel="preload" href="/leovue/assets/js/15.a1bc812b.js" as="script"><link rel="prefetch" href="/leovue/assets/js/3.d3440eb0.js"><link rel="prefetch" href="/leovue/assets/js/1.c0330c93.js"><link rel="prefetch" href="/leovue/assets/js/4.7b6392ae.js"><link rel="prefetch" href="/leovue/assets/js/5.0d24eb3c.js"><link rel="prefetch" href="/leovue/assets/js/6.be3c1ae6.js"><link rel="prefetch" href="/leovue/assets/js/7.0077c48e.js"><link rel="prefetch" href="/leovue/assets/js/8.e9cb4d6e.js"><link rel="prefetch" href="/leovue/assets/js/9.d4e07c75.js"><link rel="prefetch" href="/leovue/assets/js/10.cd18093c.js"><link rel="prefetch" href="/leovue/assets/js/11.2f2ad536.js"><link rel="prefetch" href="/leovue/assets/js/12.0643b7fe.js"><link rel="prefetch" href="/leovue/assets/js/13.a86008f7.js"><link rel="prefetch" href="/leovue/assets/js/14.e103f0c2.js"><link rel="prefetch" href="/leovue/assets/js/16.8b9de87f.js"><link rel="prefetch" href="/leovue/assets/js/17.a58c599d.js">
    <link rel="stylesheet" href="/leovue/assets/css/0.styles.2bae9745.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/leovue/" class="home-link router-link-active"><!----> <span class="site-name">LeoVue</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://www.woodso.com?from=leovue" target="_blank" rel="noopener noreferrer" class="nav-link external">
  西阁码农
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/axolo/leovue" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://www.woodso.com?from=leovue" target="_blank" rel="noopener noreferrer" class="nav-link external">
  西阁码农
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/axolo/leovue" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><a href="/leovue/" class="sidebar-link">首页</a></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading open"><span>组件</span> <span class="arrow down"></span></p> <ul class="sidebar-group-items"><li><a href="/leovue/api/leo-dialog.html" class="sidebar-link">leo-dialog</a></li><li><a href="/leovue/api/leo-lodop.html" class="sidebar-link">leo-lodop</a></li><li><a href="/leovue/api/leo-export.html" class="sidebar-link">leo-export</a></li><li><a href="/leovue/api/leo-import.html" class="sidebar-link">leo-import</a></li><li><a href="/leovue/api/leo-upload.html" class="active sidebar-link">leo-upload</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/leovue/api/leo-upload.html#示例" class="sidebar-link">示例</a></li><li class="sidebar-sub-header"><a href="/leovue/api/leo-upload.html#说明" class="sidebar-link">说明</a></li><li class="sidebar-sub-header"><a href="/leovue/api/leo-upload.html#代码" class="sidebar-link">代码</a></li><li class="sidebar-sub-header"><a href="/leovue/api/leo-upload.html#属性" class="sidebar-link">属性</a></li><li class="sidebar-sub-header"><a href="/leovue/api/leo-upload.html#事件" class="sidebar-link">事件</a></li><li class="sidebar-sub-header"><a href="/leovue/api/leo-upload.html#服务器" class="sidebar-link">服务器</a></li></ul></li></ul></div></li><li><a href="/leovue/changelog.html" class="sidebar-link">修订</a></li><li><a href="/leovue/postscript.html" class="sidebar-link">后记</a></li></ul> <div class="sidebar-bottom" data-v-50df324a><div class="pages" data-v-50df324a>
    Hosted by <a href="https://pages.github.com" style="font-weight: bold" data-v-50df324a>GitHub Pages</a></div> <div class="google-ads" data-v-50df324a><ins data-ad-client="ca-pub-4521521675997745" data-ad-slot="8498299482" data-ad-format="auto" data-full-width-responsive="true" class="adsbygoogle" style="display:block" data-v-50df324a></ins></div></div></div> <div class="page"> <div class="content"><h1 id="leo-upload"><a href="#leo-upload" aria-hidden="true" class="header-anchor">#</a> leo-upload</h1> <h2 id="示例"><a href="#示例" aria-hidden="true" class="header-anchor">#</a> 示例</h2> <!----> <h2 id="说明"><a href="#说明" aria-hidden="true" class="header-anchor">#</a> 说明</h2> <p>多文件可控制急速异步文件上传。尽量避免占用服务器资源，最大限度利用服务器已有资源，
纯客户端实现哈希计算，绿色环保。解耦设计，不过分依赖服务器数据结构。</p> <p><img src="/leovue/assets/img/leo-upload.5207c44d.png" alt="文件上传"></p> <p><img src="/leovue/assets/img/leo-upload-gif.b309a061.gif" alt="动图演示"></p> <h2 id="代码"><a href="#代码" aria-hidden="true" class="header-anchor">#</a> 代码</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>leo-upload</span>
      <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:visible.sync</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:types</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>types<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>size<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:multiple</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:rapid</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rapid<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@result</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>result<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>leo-upload</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>文件上传与服务器配置和返回密切相关，参数务必配合服务器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>文件上传地址：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>url<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action.url<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action_hash_path<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上传验证键址：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>url<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action_hash_path<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>action.hash_path<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tip<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      若，上传成功返回：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>{&quot;data&quot;:[{&quot;md5&quot;:&quot;25feb93e5e1b18f5596f384f214b1242&quot;}]}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
      则，<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>action.hash_path<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>对应为<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>data[0].md5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
      强烈建议服务器端再次验证本地hash，以防客户端伪装欺骗！！！
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rapid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>急速验证地址：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>url<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rapid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rapid.url<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tip<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>%%hash_value%%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>占位符代表验证地址中的HASH字串<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>，提交时被替换
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rapid_hash_path<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>急速返回键址：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>url<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rapid_hash_path<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rapid.hash_path<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tip<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        若，验证成功返回：
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>{&quot;data&quot;:[{&quot;md5&quot;:&quot;25feb93e5e1b18f5596f384f214b1242&quot;}]}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
        则，<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>rapid.hash_path<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>对应为<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>data[0].md5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
        本示例配合本文档的 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>#服务器<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>服务器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> 代码实现，请留意本示例的参数设置
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>open<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上传<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>files.length<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>清除MD5列表<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>files.length<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>file-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上传成功的文件MD5列表
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(file,index) in files<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>http://localhost:7001/files/<span class="token punctuation">'</span>+file.md5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>_blank<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          {{file.md5}}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> LeoUpload <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@axolo/leovue'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  components<span class="token punctuation">:</span> <span class="token punctuation">{</span> LeoUpload <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      files<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      title<span class="token punctuation">:</span> <span class="token string">'多文件过滤异步急速上传'</span><span class="token punctuation">,</span>
      visible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      size<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span>  <span class="token comment">// 500MB</span>
      types<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'zip'</span><span class="token punctuation">,</span> <span class="token string">'txt'</span><span class="token punctuation">,</span> <span class="token string">'csv'</span><span class="token punctuation">,</span> <span class="token string">'jpg'</span><span class="token punctuation">,</span> <span class="token string">'png'</span><span class="token punctuation">,</span> <span class="token string">'pdf'</span><span class="token punctuation">,</span> <span class="token string">'exe'</span><span class="token punctuation">,</span> <span class="token string">'xls'</span><span class="token punctuation">,</span> <span class="token string">'xlsx'</span><span class="token punctuation">,</span> <span class="token string">'iso'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      action<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        method<span class="token punctuation">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
        url<span class="token punctuation">:</span> <span class="token string">'http://localhost:7001/files'</span><span class="token punctuation">,</span>
        hash_path<span class="token punctuation">:</span> <span class="token string">'md5'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      rapid<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        method<span class="token punctuation">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
        url<span class="token punctuation">:</span> <span class="token string">'http://localhost:7001/files/%%hash_value%%'</span><span class="token punctuation">,</span>
        hash_path<span class="token punctuation">:</span> <span class="token string">'md5'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">result</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>files <span class="token operator">=</span> res
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>visible <span class="token operator">=</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>files <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style language-css">
<span class="token selector">#leo-upload</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.input</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.url</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.tip</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> small<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> darkcyan<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.file-list</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Courier New'</span>, Courier, monospace<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> small<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">code</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="属性"><a href="#属性" aria-hidden="true" class="header-anchor">#</a> 属性</h2> <table><thead><tr><th>名称</th> <th>类型</th> <th>说明</th> <th>默认值</th> <th>必填</th></tr></thead> <tbody><tr><td>title</td> <td>String</td> <td>对话框标题</td> <td></td> <td></td></tr> <tr><td>visible</td> <td>Boolean</td> <td>对话框可见性</td> <td></td> <td></td></tr> <tr><td>types</td> <td>Array</td> <td>文件格式</td> <td>[] = 不限制</td> <td></td></tr> <tr><td>size</td> <td>Number</td> <td>单文件最大尺寸限制</td> <td>0 = 不限制</td> <td></td></tr> <tr><td>max</td> <td>Number</td> <td>最大文件总量</td> <td>0 = 不限制</td> <td></td></tr> <tr><td>multiple</td> <td>Boolean</td> <td>允许多文件上传</td> <td>true = 允许</td> <td></td></tr> <tr><td>action</td> <td>Object</td> <td>上传地址参数</td> <td></td> <td></td></tr> <tr><td>rapid</td> <td>Object</td> <td>启用急传参数</td> <td>false = 不启用</td> <td></td></tr></tbody></table> <div class="tip custom-block"><p class="custom-block-title">action和rapid</p> <ul><li><code>%%hash_value%%</code>: 占位符，对应被验证的哈希值</li> <li><code>hash_path</code>：被验证的哈希值在验证返回数据里的位置</li></ul></div> <div class="danger custom-block"><p class="custom-block-title">服务器限制</p> <p>请注意，服务器也会对文件上传的格式、大小、数量等做限制，请务必跟服务器配合。
避免出现显示上传成功，但服务器却没有接受文件或更新对应数据的情况发生。</p></div> <h2 id="事件"><a href="#事件" aria-hidden="true" class="header-anchor">#</a> 事件</h2> <table><thead><tr><th>名称</th> <th>值</th> <th>说明</th></tr></thead> <tbody><tr><td>result</td> <td>Array</td> <td>上传成功的返回数据（其格式由服务器决定）</td></tr></tbody></table> <h2 id="服务器"><a href="#服务器" aria-hidden="true" class="header-anchor">#</a> 服务器</h2> <p>文件上传功能必须搭配能处理文件上传的服务器使用，理论上，任何支持文件上传功能的服务器都可以。
若开启急速上传，需要服务器支持<code>MD5</code>验证，且符合相应数据格式。本文以<a href="https://eggjs.org/zh-cn/" target="_blank" rel="noopener noreferrer">Egg.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>作为服务器实现，
<code>Egg.js</code>默认内置了<a href="https://eggjs.org/zh-cn/plugins/multipart.html" target="_blank" rel="noopener noreferrer">egg-multipart<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>插件用于处理文件上传。</p> <h4 id="安装"><a href="#安装" aria-hidden="true" class="header-anchor">#</a> 安装</h4> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 1. egg.js 安装</span>
<span class="token function">npm</span> i egg-init -g
egg-init file-server --type<span class="token operator">=</span>simple
<span class="token function">cd</span> file-server
<span class="token function">npm</span> i
<span class="token function">npm</span> run dev
<span class="token function">open</span> localhost:7001
</code></pre></div><h4 id="配置"><a href="#配置" aria-hidden="true" class="header-anchor">#</a> 配置</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 2. config/plugin.js 安装egg-cors，并开启</span>
exports<span class="token punctuation">.</span>cors <span class="token operator">=</span> <span class="token punctuation">{</span>
  enable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token keyword">package</span><span class="token punctuation">:</span> <span class="token string">'egg-cors'</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// config/config.default.js</span>
<span class="token comment">// 3. 简单起见，直接关闭CSRF，否则发起非GET请求报CSRF错误</span>
config<span class="token punctuation">.</span>security <span class="token operator">=</span> <span class="token punctuation">{</span> csrf<span class="token punctuation">:</span> <span class="token punctuation">{</span> enable<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token comment">// 4. 开启跨域，egg-cors为非内置插件，已在plugin.js里面开启</span>
config<span class="token punctuation">.</span>cors <span class="token operator">=</span> <span class="token punctuation">{</span>
  origin<span class="token punctuation">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span>
  allowMethods<span class="token punctuation">:</span> <span class="token string">'GET,HEAD,PUT,POST,DELETE,PATCH'</span>
<span class="token punctuation">}</span>
<span class="token comment">// 5. egg-multipart参数设置</span>
config<span class="token punctuation">.</span>multipart <span class="token operator">=</span> <span class="token punctuation">{</span>
  fileSize<span class="token punctuation">:</span> <span class="token string">'5000mb'</span><span class="token punctuation">,</span>
  fileExtensions<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'.xls'</span><span class="token punctuation">,</span><span class="token string">'.xlsx'</span><span class="token punctuation">,</span><span class="token string">'.txt'</span><span class="token punctuation">,</span> <span class="token string">'.pdf'</span> <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="实现"><a href="#实现" aria-hidden="true" class="header-anchor">#</a> 实现</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app/controller/files.js</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> _ <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'lodash'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> crypto <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'crypto'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> sendToWormhole <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'stream-wormhole'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> awaitReadStream <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'await-stream-ready'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>read
<span class="token keyword">const</span> Controller <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'egg'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Controller

<span class="token keyword">class</span> <span class="token class-name">FilesController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span>ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>ctx<span class="token punctuation">)</span>    
    <span class="token keyword">this</span><span class="token punctuation">.</span>files <span class="token operator">=</span> <span class="token punctuation">[</span>  <span class="token comment">// 测试用数据，实际应用应该结合 service 和数据库</span>
      <span class="token punctuation">{</span> <span class="token string">&quot;md5&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;808e3dbe48915685d1597c7b789888d8&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token string">&quot;md5&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;aae7f6464638dec6616489ef5bd404bb&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token string">&quot;md5&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;25feb93e5e1b18f5596f384f214b1242&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token string">&quot;md5&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;6fdf1caf3f77017f5a6622c133dafbc7&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token comment">// FoxitPhantom224cn.exe</span>
      <span class="token punctuation">{</span> <span class="token string">&quot;md5&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;e922301da3512247ab71407096ab7810&quot;</span> <span class="token punctuation">}</span>   <span class="token comment">// HashCalc.exe</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">async</span> <span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>files
  <span class="token punctuation">}</span>

  <span class="token keyword">async</span> <span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> file <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>files<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string">&quot;md5&quot;</span><span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> file <span class="token operator">?</span> file <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;error&quot;</span><span class="token punctuation">:</span> <span class="token number">404</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 此处为简单测试，不考虑文件夹逻辑，简单粗暴的放在固定目录下，也不考虑后台操作失败处理。</span>
  <span class="token comment">// 请注意新建 files 和 tmp 目录后运行代码，否则404。请留意 .gitignore 配置。</span>
  <span class="token keyword">async</span> <span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> ctx <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
    <span class="token keyword">const</span> rs <span class="token operator">=</span> <span class="token keyword">await</span> ctx<span class="token punctuation">.</span><span class="token function">getFileStream</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> dir <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">mkdtempSync</span><span class="token punctuation">(</span><span class="token string">'tmp/leovue-'</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> tmp <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>dir<span class="token punctuation">,</span> rs<span class="token punctuation">.</span>filename<span class="token punctuation">)</span>
    <span class="token keyword">const</span> ws <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">createWriteStream</span><span class="token punctuation">(</span>tmp<span class="token punctuation">)</span>
    <span class="token keyword">const</span> hash <span class="token operator">=</span> crypto<span class="token punctuation">.</span><span class="token function">createHash</span><span class="token punctuation">(</span><span class="token string">'md5'</span><span class="token punctuation">)</span>
    rs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'data'</span><span class="token punctuation">,</span> chunk <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> hash<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>chunk<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> ws<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>chunk<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    rs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> ws<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    rs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token function">sendToWormhole</span><span class="token punctuation">(</span>rs<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">await</span> <span class="token function">awaitReadStream</span><span class="token punctuation">(</span>rs<span class="token punctuation">)</span>           <span class="token comment">// 你走，我断后！！！</span>
    <span class="token keyword">const</span> md5 <span class="token operator">=</span> hash<span class="token punctuation">.</span><span class="token function">digest</span><span class="token punctuation">(</span><span class="token string">'hex'</span><span class="token punctuation">)</span>      <span class="token comment">// MD5可以在 on end 里计算</span>
    ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token punctuation">{</span> md5<span class="token punctuation">:</span> md5 <span class="token punctuation">}</span>             <span class="token comment">// 输出到前端，后端继续执行（非主流）</span>
    <span class="token keyword">const</span> fix <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'files'</span><span class="token punctuation">,</span> md5 <span class="token operator">+</span> path<span class="token punctuation">.</span><span class="token function">extname</span><span class="token punctuation">(</span>rs<span class="token punctuation">.</span>filename<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLocaleLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    fs<span class="token punctuation">.</span><span class="token function">rename</span><span class="token punctuation">(</span>tmp<span class="token punctuation">,</span> fix<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> err <span class="token operator">&amp;&amp;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">||</span> fs<span class="token punctuation">.</span><span class="token function">rmdir</span><span class="token punctuation">(</span>dir<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 后端继续</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> FilesController
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app/router.js 开启路由</span>
router<span class="token punctuation">.</span><span class="token function">resources</span><span class="token punctuation">(</span><span class="token string">'files'</span><span class="token punctuation">,</span> <span class="token string">'/files'</span><span class="token punctuation">,</span> controller<span class="token punctuation">.</span>files<span class="token punctuation">)</span>
</code></pre></div></div> <div class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新: </span> <span class="time">8/25/2018, 9:58:37 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/leovue/api/leo-import.html" class="prev">
          leo-import
        </a></span> <span class="next"><a href="/leovue/changelog.html">
          修订
        </a>
        →
      </span></p></div> </div> <!----></div></div>
    <script src="/leovue/assets/js/15.a1bc812b.js" defer></script><script src="/leovue/assets/js/app.bbd8fb51.js" defer></script>
  </body>
</html>
